<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>{{.sysname}}</title>
    <link rel="stylesheet" href="/static/css/newmain.css"/>
    <link rel="stylesheet" href="/static/css/top.css"/>
</head>

{{template "top.html" .}}
<body class="camslist_body">
<div class="modal-headers">算法</div>
<div class="formout">
    <form method="post" name="form" id="form" onsubmit="return check()">
        <div class="form-box">
            <div class="form-head">
                <i class="iconfont icon-jilu"></i>
                {{if eq .ACTION_NAME "Edit"}}
                    编辑
                {{else}}
                    新增
                {{end}}              
                <button class="form-btn btn-red mar-left" type="button" onclick="self.location=document.referrer;"> 取消</button>
                <button class="form-btn btn-green" type="submit" name="submit" id="submit">提交</button>
            </div>
            <div class="form-body">
                <input type="hidden" name="id" value="{{.Data.Id}}"/>
                <div class="row">
                    <label for="langs" class="form_labelText col-3"><span class="required">*</span>类型：</label>
                    <select name="langs" id="langs" required class="form_text col-13">
                        <option value="" selected="selected">语言选择</option>
                        {{if eq .ACTION_NAME "Add"}}
                            {{range  $vo := .LangTypes}}
                                <option value="{{$vo.Lang}}">
                                    {{$vo.Name}}
                                </option>
                            {{end}}
                        {{else}}
                            {{range $vo := .LangTypes}}
                                <option value="{{$vo.Lang}}" {{if eq $.Data.Lang $vo.Lang}} selected="selected" {{end}}>
                                    {{$vo.Name}}
                                </option>
                            {{end}}
                        {{end}}
                    </select>
                </div>
                <div class="row">
                    <label for="status" class="form_labelText col-3"><span class="required">*</span>是否启用：</label>
                    <select name="ison" id="status" required class="form_text col-13">
                        {{if eq .ACTION_NAME "Add"}}
                            <option value="" selected="selected">状态</option>
                            <option value="on">启用</option>
                            <option value="off">停用</option>
                        {{else}}
                            <option value="on" {{if eq .Data.Ison "on"}} selected="selected" {{end}}>
                               启用
                            </option>
                            <option value="off" {{if eq .Data.Ison "off"}} selected="selected" {{end}}>
                               停用
                            </option>  
                        {{end}}
                    </select>
                </div>
                <div class="row">
                    <label for="name" class="form_labelText col-3"><span class="required">*</span>接口名称
                        ：</label>
                    <input name="name" required id="name" value="{{.Data.Name}}" class="form_text col-13">
                    <span id="checkName"></span>
                </div>
                <div class="row">
                    <label for="url" class="form_labelText col-3"><span class="required">*</span>URL：</label>
                    <input name="url" required id="url" value="{{.Data.Url}}" class="form_text col-13">
                    <span id="checkUrl"></span>
                </div>
                <div class="row">
                    <label for="method" class="form_labelText col-3"><span
                        class="required">*</span>请求方式：</label>
                    <select name="method" id="method" required class="form_text col-13">
                        {{if eq .ACTION_NAME "Add"}}
                            <option value="post">POST</option>
                            <option value="get">GET</option>
                        {{else}}
                            <option value="post" {{if eq .Data.Method "post"}} selected="selected" {{end}}>
                                POST
                            </option>
                            <option value="get" {{if eq .Data.Method "get"}} selected="selected" {{end}}>
                                GET
                            </option>
                        {{end}}
                    </select>
                </div>
                <div class="row">
                    <label for="headers" class="form_labelText  form_labelText_text col-3"> 头：</label>
                    <textarea class="form_textarea col-13" name="headers" id="headers">{{.Data.Headers}}</textarea>
                </div>
                <div class="row">
                    <label for="paramtype" class="form_labelText col-3"><span
                        class="required">*</span>参数类型：</label>
                    <select name="paramtype" id="paramtype" required class="form_text col-13">
                        {{if eq .ACTION_NAME "Add"}}
                            {{/*                        <option value="" selected="selected">请选择参数类型</option>*/}}
                            <option value="json">JSON(application/json)</option>
                            <option value="file">FILE</option>
                        {{else}}
                            <option value="json" {{if eq .Data.Paramtype "json"}} selected="selected" {{end}}>
                                JSON(application/json)
                            </option>
                            <option value="file" {{if eq .Data.Paramtype "file"}} selected="selected" {{end}}>
                                FILE
                            </option>
                        {{end}}
                    </select>
                </div>
                <div class="row">
                    <label for="staticparams"
                    class="form_labelText  form_labelText_text col-3">固定参数：</label>
                    <textarea class="form_textarea col-13" name="staticparams"
                            id="staticparams">{{if eq .ACTION_NAME "Add"}}{}{{else}}{{.Data.StaticParams}}{{end}}</textarea>
                </div>
                <div class="row">
                    <label for="eval_src" class="form_labelText  form_labelText_text col-3">嵌入的代碼：</label>
                    <textarea class="form_textarea col-13" name="eval_src" id="eval_src">{{.Data.EvalSrc}}</textarea>
                </div>
                <div class="row">
                    <label for="eval_usefor" class="form_labelText col-3">用于：</label>
                    <select name="eval_usefor" id="eval_usefor" class="form_text col-13">
                        {{if eq .ACTION_NAME "Add"}}
                            <option value="" selected="selected">请选择</option>
                            <option value="headers">Headers</option>
                            <option value="params">Params</option>
                        {{else}}
                            <option value="" selected="selected">请选择</option>
                            <option value="headers" {{if eq .Data.EvalUsefor "headers"}} selected="selected" {{end}}>
                                Headers
                            </option>
                            <option value="params" {{if eq .Data.EvalUsefor "params"}} selected="selected" {{end}}>
                                Params
                            </option>
                        {{end}}
                    </select>
                </div>
                <div class="row">
                    <label class="form_labelText col-3">附加参数：</label>
                    <span class="item" id="item_robotid">
                    <input size="40" type="checkbox" id="" name="robotid" value="robotid"/>
                    <label for="robotid" class="usergroup_checkLab">robotid</label>
                        </span>
                    <span class="item" id="item_tenantid">
                    <input size="40" type="checkbox" id="" name="tenantid" value="tenantid"/>
                    <label for="tenantid" class="usergroup_checkLab">tenantid</label>
                        </span>
                    <span class="item" id="item_location">
                    <input size="40" type="checkbox" id="" name="location" value="location"/>
                    <label for="location" class="usergroup_checkLab">location</label>
                        </span>
                </div>
                <div class="row">
                    <label for="params" class="form_labelText  form_labelText_text col-3"><span
                        class="required">*</span>请求参数：</label>
                    <textarea class="form_textarea col-13" name="params" required
                            id="params">{{if eq .ACTION_NAME "Add"}}{}{{else}}{{.Data.Params}}{{end}}</textarea>
                    <span id="checkParams"></span>
                </div>
                <div class="row">
                    <button class="button_grey form_btn" type="button"
                    onclick="beatyParam()"
                    name="beatyparam"><span>美化</span></button>
                </div>
                <div class="row">
                    <label for="description" class="form_labelText  form_labelText_text col-3"> 描述 ：</label>
                    <textarea class="form_textarea col-13" name="description"
                                id="ccontent">{{.Data.Description}}</textarea>
                    <span id="checkContent"></span>
                </div>
            </div>
        </div>
    </form>
</div>
</body>
<script src="{{.viewpath}}/Js/jquery-3.4.1.min.js"></script>
<script src="{{.viewpath}}/Js/jquery.validate.js"></script> 
<script src="{{.viewpath}}/Js/jsbeautify.js"></script>
<script type='text/javascript'>
    var jokeJs = {
        validate: function () {
            $("#form").validate({
                rules: {
                    content: "required",
                    tag: "required"
                }
            });

            $.validator.messages = {
                required: '必填'
            }
        },

        form: function () {
            $('#form').submit(function (event) {

            });
        }
    }

    for (var i in jokeJs) {
        if (typeof jokeJs[i] == 'function') {
            jokeJs[i]();
        }
    }

    //判断params、headers等是否合法
    function check() {
        let headers = $("#headers").val().trim()
        if (headers && !isJsonString(headers)) {
            alert("headers is not right")
            return false
        }
        let paramType = $('#paramtype').val();
        if (paramType == "json") {
            if (!isJsonString($("#params").val())) {
                alert("params is not right")
                return false
            }
            let staticParams = $("#staticparams").val().trim()
            if (staticParams && !isJsonString(staticParams)) {
                alert("Static Params is not right")
                return false
            }
        }
    }

    //判断是否是json对象
    function isJsonString(str) {
        str = String(str)
        try {
            let obj = JSON.parse(str);
            return typeof (obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length;
        } catch (e) {
            return false;
        }
        return true;
    }

    //美化
    function do_js_beautify(s) {
        if (s == undefined) {
            s = ""
        }
        var js_source = s.replace(/^\s+/, '');
        if (js_source.length == 0)
            return;
        var tabsize = 4;
        tabchar = ' ';
        if (tabsize == 1)
            tabchar = '\t';
        return js_beautify(js_source, tabsize, tabchar);
    }

    function beatyParam() {
        let param = $("#params").val()
        let fjs = do_js_beautify(param)
        $("#params").val(fjs);

        let headers = $("#headers").val()
        fjs = do_js_beautify(headers)
        $("#headers").val(fjs);

        let staticparams = $("#staticparams").val()
        fjs = do_js_beautify(staticparams)
        $("#staticparams").val(fjs);
    }

    //根据参数类型设置控件显隐
    function paramTypeChange() {
        let pType = $("#paramtype").val();
        if (pType == "file") {
            $("#params").val(
                `{"file":"file"}`
            )
        }
    }

    $(function () {
        $("#paramtype").change(paramTypeChange)
        $("input:checkbox").change(function () {
            let v = this.value, checked = this.checked, p = $("#params").val();
            let paramJson = JSON.parse(p)
            if (checked) {
                paramJson[v] = ""
            } else {
                delete paramJson[v]
            }
            $("#params").val(do_js_beautify(JSON.stringify(paramJson)))
        })
    })


</script>
</html>